<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        box-sizing: border-box;
      }
      .box1 {
        background-color: red;
      }
      .box2 {
        background-color: blue;
      }
      .box3 {
        background-color: yellow;
      }
      .border {
        border: 5px solid black;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>

    <script>
      //this指向的问题还要看
      var box = document.querySelectorAll("div");
      for (var i = 0; i < box.length; i++) {
        box[i].onclick = function () {
          for (var j = 0; j < box.length; j++) {
            box[j].classList.remove("border");
          }
          this.classList.toggle("border");
        };
      }
      /* box[0].onclick = function () {
                    box[0].classList.add("border");
                  };
                  box[1].onclick = function () {
                    box[0].classList.remove("border");
                    box[1].classList.add("border");
                  };
                  box[2].onclick = function () {
                    box[0].classList.remove("border");
                    box[1].classList.remove("border");
                    box[2].classList.add("border");
                  }; */
    </script>
    <!-- <table
      border=""
      style="border: 1px solid #ccc; width: 200px; height: 200px"
    >
      <tbody>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table>
    <div style="width: 200px; height: 200px">我是div</div>
    <button>我是按钮</button> -->
    <!-- <button>点我变色</button> -->
    <!-- <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul> -->
    <script>
      //方式一:
      /* var inside = document.getElementsByTagName("li");
           inside[0].innerHTML = "修改了";
           inside[1].innerHTML = "修改了";
           inside[2].innerHTML = "修改了";
           inside[3].innerHTML = "修改了";
      */
      //方法二: 通过for循环
      // var inside = document.getElementsByTagName("li"); //伪数组
      // for (var i = 0; i < inside.length; i++) {
      //   inside[i].innerHTML = "修改了";
      // }

      // var obj = {
      //   age: 20,
      // };
      // var myage = "age";
      // console.log(obj.myage); //会把myage当成字符串
      // console.log(obj[myage]); //会把myage当成变量解析 ==>obj['age']

      /*  var myTr = document.querySelectorAll("tr");
      // console.log(myTr);
      for (var i = 0; i < myTr.length; i++) {
        // console.log(myTr[i]);
        if (i % 2 == 0) {
          myTr[i].style.backgroundColor = "red";
        } else {
          myTr[i].style.backgroundColor = "yellow";
        }
      } */

      /*    var btn = document.querySelector("button");
      var div = document.querySelector("div");
      var num = 0;
      btn.onclick = function () {
        num += 1;
        switch (num) {
          case 1:
            div.style.backgroundColor = "cyan";
            break;
          case 2:
            div.style.backgroundColor = "yellow";
            break;
          case 3:
            div.style.backgroundColor = "greenyellow";
            break;
          
        }
        if (num == 3) {
          num = 0;
        }
      }; */
    </script>
  </body>
</html>
